<template>
  <div class="card-grid" :class="gridClass">
    <div
      v-for="(item, index) in data"
      :key="getItemKey(item, index)"
      class="card-item"
      :class="cardClass"
      @click="handleCardClick(item, index)"
    >
      <slot name="card" :item="item" :index="index"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  data: any[]
  columns?: number
  gap?: string
  cardClass?: string
  clickable?: boolean
  keyField?: string
}

const props = withDefaults(defineProps<Props>(), {
  columns: 3,
  gap: '20px',
  cardClass: 'glass-card',
  clickable: true,
  keyField: 'id'
})

const emit = defineEmits<{
  'card-click': [item: any, index: number]
}>()

const gridClass = computed(() => ({
  [`grid-cols-${props.columns}`]: true,
  'clickable': props.clickable
}))

const getItemKey = (item: any, index: number) => {
  return item[props.keyField] || `item-${index}`
}

const handleCardClick = (item: any, index: number) => {
  if (props.clickable) {
    emit('card-click', item, index)
  }
}
</script>

<style lang="scss" scoped>
.card-grid {
  display: grid;
  gap: v-bind(gap);
  
  &.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
  &.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  &.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  &.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  &.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
  
  @media (max-width: 1200px) {
    &.grid-cols-4,
    &.grid-cols-5 {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  @media (max-width: 768px) {
    &.grid-cols-3,
    &.grid-cols-4,
    &.grid-cols-5 {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 480px) {
    grid-template-columns: 1fr;
  }
  
  .card-item {
    transition: all 0.3s ease;
    
    &.clickable {
      cursor: pointer;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
      }
    }
  }
}
</style>
